<template>
  <div class="pinia-demo">
    <h1>Pinia 状态管理示例</h1>

    <div class="demo-section">
      <h2>计数器 Store</h2>

      <div class="counter-display">
        <div class="count-value">
          <h3>当前计数: {{ counterStore.count }}</h3>
          <p>双倍计数: {{ counterStore.doubleCount }}</p>
          <p>
            状态:
            <span v-if="counterStore.isPositive" class="positive">正数</span>
            <span v-else-if="counterStore.isNegative" class="negative">负数</span>
            <span v-else class="zero">零</span>
          </p>
        </div>

        <div class="controls">
          <button @click="counterStore.increment()">增加</button>
          <button @click="counterStore.decrement()">减少</button>
          <button @click="counterStore.incrementBy(5)">增加 5</button>
          <button @click="counterStore.reset()">重置</button>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h2>操作历史</h2>
      <p>历史记录数量: {{ counterStore.historyCount }}</p>

      <div class="history-list">
        <div v-for="(record, index) in counterStore.history" :key="index" class="history-item">
          {{ record }}
        </div>
        <div v-if="counterStore.history.length === 0" class="no-history">暂无操作记录</div>
      </div>

      <button @click="counterStore.clearHistory()" class="clear-btn">清空历史</button>
    </div>

    <div class="demo-section">
      <h2>多个组件共享状态</h2>
      <p>打开多个浏览器标签或在不同组件中使用同一个 store，观察状态是否同步</p>

      <div class="component-grid">
        <CounterComponent title="组件 A" />
        <CounterComponent title="组件 B" />
        <CounterComponent title="组件 C" />
      </div>
    </div>

    <div class="info-section">
      <h3>Pinia 特性</h3>
      <ul>
        <li>✅ 类型安全的状态管理</li>
        <li>✅ 支持 Composition API 和 Options API</li>
        <li>✅ 开发工具支持</li>
        <li>✅ 模块化设计</li>
        <li>✅ 支持热更新</li>
        <li>✅ 轻量级，无样板代码</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import CounterComponent from '@/components/CounterComponent.vue'

const counterStore = useCounterStore()
</script>

<style scoped>
.pinia-demo {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.demo-section h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 2px solid #ff6b6b;
  padding-bottom: 5px;
}

.counter-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.count-value h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.count-value p {
  margin: 5px 0;
  font-size: 16px;
}

.positive {
  color: #4caf50;
  font-weight: bold;
}

.negative {
  color: #f44336;
  font-weight: bold;
}

.zero {
  color: #ff9800;
  font-weight: bold;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 10px 16px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: #ff5252;
}

.history-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 15px 0;
  padding: 10px;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.history-item {
  padding: 8px 12px;
  margin: 5px 0;
  background-color: #e3f2fd;
  border-radius: 4px;
  border-left: 4px solid #2196f3;
}

.no-history {
  text-align: center;
  color: #999;
  padding: 20px;
}

.clear-btn {
  padding: 8px 16px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-btn:hover {
  background-color: #f57c00;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.info-section {
  padding: 20px;
  background-color: #fff3e0;
  border-radius: 8px;
  border: 1px solid #ff9800;
}

.info-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.info-section ul {
  list-style-type: none;
  padding: 0;
}

.info-section li {
  padding: 5px 0;
  font-size: 14px;
}
</style>
